<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-01-21 17:37:03
-->
<template>
	<div>{{ age }}=>{{ _age1 }}=>{{ _age2 }}</div>
	<br />
	<!-- <div>{{ $store.state.user.name }}</div> -->
	<div>{{ name }}</div>
	<br />
	<button @click="A_change_age('18')">改变age</button>
	<button @click="A_change_name('yao')">改变name</button>
</template>

<script>
import { mapActions, mapState, useStore } from 'vuex';
import { computed, defineComponent } from 'vue';

export default defineComponent({
	setup() {
		const store = useStore();

		// 如果要让store的数据响应，用computed包装一次
		return {
			_age1: store.state.age, // 无响应
			_age2: computed(() => store.state.age),
			...mapActions(['A_change_age']),
			...mapActions('user', ['A_change_name']),
		};
	},
	// 这里还是vue2的语法，应该可以改变，
	computed: {
		// ...mapState({age/* 这里是本页面key，可随意 */:'age'/* 这里是store里面key，不能乱写 */}),
		...mapState(['age']),
		// ...mapState({ name: (state) => state.user.name }),
		...mapState('user', ['name']),
	},
});
</script>
